<template>
  <div class="post-detail">
    <!-- 帖子标题 -->
    <h1>{{ talkForm.title }}</h1>
    <!-- 用户信息 -->
    <div class="author-info">
      <el-avatar :size="40" :src="talkForm.createdByImage"></el-avatar>
      <span class="author-name">{{ talkForm.createdByName }}</span>
    </div>

    <div class="post-content">
      <div v-html="talkForm.content" class="text-content" :class="{ collapsed: isCollapsed }">
      </div>
      <!-- 仅在内容超过 2 行时显示展开/收起按钮 -->
      <button v-if="isCollapsible" @click="toggleCollapse" class="toggle-btn">
        {{ isCollapsed ? '收起' : '展开' }}
      </button>
    </div>


  </div>
  <!-- 评论区域 -->
  <div class="comments">
    <el-button type="primary"  @click="submit(listData)" style="margin-top: 10px;">发表评论</el-button>
    <PageB v-model:valueHtml="listData.comment" class="value-html"/>
    <br><br>
    <div id="app">
      <CommentTree :comments="treeData" />
    </div>
  </div>
</template>

<script setup>

//列表
import {computed, nextTick, onBeforeMount, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import talkAPI from "@/api/module/talk";
import PageB from "@/components/chat/TalkCreateNew.vue";
import CommentTree from '@/components/chat/CommentTree.vue';

let treeData = ref(null);

let talkForm = reactive({
  id:'',
  title:'',
  content:'',
  createdBy:'',
  createdAt:'',
  createdByName:'',
  createdByImage:'',
})

// 表单数据
const listData = ref({
  title: '',
  comment: '',
});

const router = useRoute()
const updateKey = ref(0);

onBeforeMount(async () => {
  let id = router.query.id;
  await getDetails(id);
  updateKey.value ++;
})
onMounted(() => {
  getTreeData();
})

// 展开/收起状态
const isCollapsed = ref(false);
const isCollapsible = ref(true);

const getDetails =  async (id) => {
  await talkAPI.getDetail(id).then((res) => {
    talkForm.content = res.data.content;
    talkForm.title = res.data.title;
    talkForm.createdBy = res.data.createdBy;
    talkForm.createdAt = res.data.createdAt;
    talkForm.createdByImage =  res.data.createdByImage;
    talkForm.createdByName = res.data.createdByName;
    //talkForm = res.data;
  }).catch((err) => {
    console.log(err)
  });
}

// 切换展开/收起
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

const getTreeData = async () => {
  let id = router.query.id;
  talkAPI.tree(id).then(res=>{
    if(res.code===200){
      treeData.value=res.data;
    }
  })
}

// 评论
const submit = async (listData) => {
  let id = router.query.id;
  const formData = new FormData();
  formData.append('parentId', 0);
  formData.append('talkId', id);
  formData.append('comment', listData.comment);
  await talkAPI.addComment(formData).then((res) => {
    getTreeData();
  }).catch((err) => {
    console.log(err)
  });
};

</script>

<style scoped>
.post-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.author-name {
  margin-left: 10px;
  font-size: 16px;
}

.text-content {
  overflow: hidden;
  display: -webkit-box; /* 需要这行以启用多行省略号 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  -webkit-line-clamp: 2; /* 限制为 2 行 */
}

.text-content.collapsed {
  max-height: none; /* 展开时显示所有内容 */
  -webkit-line-clamp: unset; /* 移除行数限制 */
}

.toggle-btn {
  background-color: transparent;
  border: none;
  color: orange;
  cursor: pointer;
  margin-top: 10px;
  padding: 0;
}

.value-html {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

</style>